<template>
  <div class="edit-profile-page">
    <div class="edit-header">
      <el-button link class="back-btn" @click="goBack">
        <el-icon><ArrowLeft /></el-icon>
      </el-button>
      <span class="edit-title">个人资料</span>
      <el-button type="primary" link class="save-btn" @click="onSave">保存</el-button>
    </div>
    <div class="profile-edit-section">
      <!-- 头像行 -->
      <div class="profile-edit-row avatar-row">
        <span class="label">头像</span>
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          :on-change="handleAvatarChange"
        >
          <el-avatar :src="form.avatar" size="large" />
          <el-icon class="avatar-arrow"><ArrowRight /></el-icon>
        </el-upload>
      </div>
      <!-- 基础信息 -->
      <div class="profile-edit-row">
        <span class="label">姓名</span>
        <el-input v-model="form.name" placeholder="请输入姓名" />
      </div>
      <div class="profile-edit-row">
        <span class="label">性别</span>
        <el-select v-model="form.gender" placeholder="请选择性别" style="width: 100px">
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </div>
      <div class="profile-edit-row">
        <span class="label">手机号</span>
        <el-input v-model="form.phone" placeholder="请输入手机号" />
      </div>
      <div class="profile-edit-row">
        <span class="label">邮箱</span>
        <el-input v-model="form.email" placeholder="请输入邮箱" />
      </div>
      <!-- 工作信息 -->
      <div class="profile-edit-row">
        <span class="label">当前职位</span>
        <el-input v-model="form.jobTitle" placeholder="请输入职位" />
      </div>
      <div class="profile-edit-row">
        <span class="label">工作年限</span>
        <el-input v-model="form.workYears" placeholder="请输入年限" />
      </div>
      <div class="profile-edit-row">
        <span class="label">所属部门</span>
        <el-input v-model="form.department" placeholder="请输入部门" />
      </div>
      <div class="profile-edit-row">
        <span class="label">服务城市</span>
        <el-input v-model="form.serviceCity" placeholder="请输入城市" />
      </div>
      <!-- 身份证照片 -->
      <div class="id-photo-section">
        <div class="id-photo-card">
          <el-upload
            class="id-uploader"
            :show-file-list="false"
            :before-upload="beforeIdUpload"
            :on-change="file => handleIdChange(file, 'idFront')"
          >
            <div class="id-upload-box">
              <img v-if="form.idFront" :src="form.idFront" class="id-img" />
              <div v-else class="id-upload-placeholder">+<br>上传正面照片</div>
            </div>
          </el-upload>
        </div>
        <div class="id-photo-card">
          <el-upload
            class="id-uploader"
            :show-file-list="false"
            :before-upload="beforeIdUpload"
            :on-change="file => handleIdChange(file, 'idBack')"
          >
            <div class="id-upload-box">
              <img v-if="form.idBack" :src="form.idBack" class="id-img" />
              <div v-else class="id-upload-placeholder">+<br>上传反面照片</div>
            </div>
          </el-upload>
        </div>
      </div>
      <div class="id-photo-tip">请上传清晰的身份证照片，确保信息清晰可见</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 默认数据结构
const defaultUser = {
  avatar: '',
  name: '',
  gender: '',
  phone: '',
  email: '',
  jobTitle: '',
  workYears: '',
  department: '',
  serviceCity: '',
  idFront: '',
  idBack: ''
}

// 从query或localStorage获取初始数据
let initialUser = {}
try {
  initialUser = route.query.user ? JSON.parse(route.query.user) : defaultUser
} catch {
  initialUser = defaultUser
}
const form = ref({ ...defaultUser, ...initialUser })

function goBack() {
  router.back()
}

function onSave() {
  // 保存到localStorage或emit事件，实际项目可用store或API
  localStorage.setItem('editProfileData', JSON.stringify(form.value))
  router.back()
}

// 头像上传
function beforeAvatarUpload(file) {
  const isImg = file.type.startsWith('image/')
  if (!isImg) {
    window.ElMessage && window.ElMessage.error('只能上传图片文件')
  }
  return isImg
}
function handleAvatarChange(file) {
  const reader = new FileReader()
  reader.onload = e => {
    form.value.avatar = e.target.result
  }
  reader.readAsDataURL(file.raw)
}
// 身份证上传
function beforeIdUpload(file) {
  const isImg = file.type.startsWith('image/')
  if (!isImg) {
    window.ElMessage && window.ElMessage.error('只能上传图片文件')
  }
  return isImg
}
function handleIdChange(file, key) {
  const reader = new FileReader()
  reader.onload = e => {
    form.value[key] = e.target.result
  }
  reader.readAsDataURL(file.raw)
}
</script>

<style scoped>
.edit-profile-page {
  background: #f5f7fa;
  min-height: 100vh;
  padding-bottom: 32px;
  max-width: 480px;
  margin: 0 auto;
  box-sizing: border-box;
}
.edit-header {
  display: flex;
  align-items: center;
  padding: 14px 8px 8px 4px;
  background: #fff;
  border-bottom: 1px solid #f2f2f2;
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 48px;
}
.back-btn {
  font-size: 1.1em;
  color: #409EFF;
  padding-left: 0;
  margin-right: 8px;
}
.edit-title {
  flex: 1;
  text-align: center;
  font-size: 1.08em;
  font-weight: bold;
  color: #222;
  letter-spacing: 1px;
}
.save-btn {
  font-size: 1em;
  color: #409EFF;
  margin-left: auto;
  padding: 0 8px;
}
.profile-edit-section {
  margin: 0 8px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  padding: 8px 0 18px 0;
  margin-top: 12px;
}
.profile-edit-row {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 1em;
}
.profile-edit-row:last-child {
  border-bottom: none;
}
.label {
  width: 72px;
  color: #666;
  font-size: 1em;
  flex-shrink: 0;
}
.avatar-row {
  border-bottom: 1px solid #f2f2f2;
}
.avatar-uploader {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.avatar-arrow {
  margin-left: 6px;
  color: #bbb;
}
.el-input, .el-select {
  width: 100%;
  font-size: 1em;
}
.id-photo-section {
  display: flex;
  gap: 10px;
  margin: 16px 0 0 0;
}
.id-photo-card {
  flex: 1;
  background: #fafbfc;
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.id-upload-box {
  width: 100%;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.id-img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #eee;
}
.id-upload-placeholder {
  color: #bbb;
  font-size: 1em;
  text-align: center;
  cursor: pointer;
  line-height: 1.5;
}
.id-photo-tip {
  color: #888;
  font-size: 0.92em;
  margin: 8px 0 0 0;
  text-align: center;
}
@media (max-width: 600px) {
  .edit-profile-page {
    max-width: 100vw;
    border-radius: 0;
    margin: 0;
    padding-bottom: 16px;
  }
  .profile-edit-section {
    margin: 0 2px;
    border-radius: 8px;
    padding: 4px 0 12px 0;
  }
  .profile-edit-row {
    padding: 8px 6px;
    font-size: 0.98em;
  }
  .label {
    width: 64px;
    font-size: 0.98em;
  }
  .id-photo-section {
    gap: 6px;
    margin-top: 10px;
  }
  .id-photo-card {
    min-height: 70px;
  }
  .id-upload-box {
    height: 70px;
  }
  .id-img {
    width: 54px;
    height: 54px;
  }
}
</style> 